<template>
  <scroll-view class="page" :scroll-x="false" :scroll-y="true" :scroll-with-animation="true">
    <view class="navbar" :style="'height:' + navBarHeight + '; padding-top: ' + statusBarHeight"></view>
    <view class="box-user">
      <view class="userinfo">
        <view class="avatar" @tap="goSetting">
          <image :src="userInfo.avatar || '/static/my/avatar.png'"></image>
        </view>
        <view class="info">
          <view class="nickname" v-if="!userInfo.user_id">请登录</view>
          <view class="nickname" v-else @tap="goLogin">{{ userInfo.nickname || '无昵称' }}</view>
          <view style="display: flex; align-items: center; margin-top: 12rpx;" v-if="userInfo.user_id">
            <view class="mid" @tap="copyMid(userInfo.user_id)">MID: {{ userInfo.user_id }}</view>
<!--            <view class="phone">
              <image src="/static/images/user/ic_phone.png"></image>
              <text>{{ userInfo.phone || '未绑定手机号' }}</text>
            </view>-->
          </view>
        </view>
      </view>
      <view class="setting" @tap="goSetting">
        <text>编辑资料</text>
        <image class="icon-arrow" src="/static/my/ic_arrow_right.png"></image>
      </view>
    </view>
    <!--        <view @tap="goLogin" class="header">
                <image class="round avatar" mode="aspectFill" :src="userInfo.avatar || appLogo"></image>
                <view class="nickname">
                    <text>{{ userInfo.mid ? userInfo.nickname || '无昵称' : '未登录' }}</text>
                </view>
                <view class="mobile" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>
            </view>-->
    <view class="box-menu">
      <!-- <view class="title">我的资产</view> -->
      <view class="wallet">
        <view @tap="goPage('/pages/my/balance/logs?type=balance')" class="item">
          <view class="count">账户余额</view>
          <view class="label">
            <text>100</text>
            <!-- <image class="icon-arrow" src="/static/my/ic_arrow_right.png"></image> -->
          </view>
        </view>
        <view @tap="goPage('/pages/my/balance/logs?type=body')" class="item">
          <view class="count">优惠券</view>
          <view class="label">
            <text>2张</text>
           
          </view>
        </view>
        <view @tap="goPage('/pages/my/balance/logs?type=voice')" class="item">
          <view class="count">尊贵VIP会员</view>
          <view class="label">
            <text>立即充值</text>
          </view>
        </view>
      </view>
    </view>
	<view class="box-menu">
	  <!-- <view class="title">我的资产</view> -->
	  <view class="wallet">
	    <view @tap="goPage('/pages/my/balance/logs?type=balance')" class="item">
	      <view class="count"></view>
	      <view class="label">
	        <text>我的收藏</text>
	        <!-- <image class="icon-arrow" src="/static/my/ic_arrow_right.png"></image> -->
	      </view>
	    </view>
	    <view @tap="goPage('/pages/my/balance/logs?type=body')" class="item">
	      <view class="count"> </view>
	      <view class="label">
	        <text>浏览记录</text>
	       
	      </view>
	    </view>
	    <view @tap="goPage('/pages/my/balance/logs?type=voice')" class="item">
	      <view class="count"> </view>
	      <view class="label">
	        <text>设置</text>
	      </view>
	    </view>
	  </view>
	</view>
    <view class="box-menu">
      <!-- <view class="title">个人中心</view> -->
      <view class="menu-list">
        <view @tap="goPage('/pages/pay/pay')" class="item" v-if="system !== 'ios' || iosPayOpen">
          <view class="icon">
            <image src="/static/my/ic_pay.png"></image>
          </view>
          <view class="label">使用教程</view>
        </view>
        <view @tap="goShare" class="item">
          <view class="icon">
            <image src="/static/my/ic_share.png"></image>
          </view>
          <view class="label">每日任务</view>
        </view>
        <view @tap="openUseCard" class="item" v-if="cardPayOpen">
          <view class="icon">
            <image src="/static/my/ic_card.png"></image>
          </view>
          <view class="label">推广中心</view>
        </view>
        <view @tap="goPage('/pages/article/list')" class="item">
          <view class="icon">
            <image src="/static/my/ic_help.png"></image>
          </view>
          <view class="label">邀请好友</view>
        </view>
        <view @tap="showKefu" class="item">
          <view class="icon">
            <image src="/static/my/ic_kefu.png"></image>
          </view>
          <view class="label">关于我们</view>
        </view>
        <view @tap="goPage('/pages/article/detail?type=about')" class="item">
          <view class="icon">
            <image src="/static/my/ic_about.png"></image>
          </view>
          <view class="label">计费说明</view>
        </view>
		<view @tap="goPage('/pages/article/detail?type=about')" class="item">
		  <view class="icon">
		    <image src="/static/my/ic_about.png"></image>
		  </view>
		  <view class="label">意见反馈</view>
		</view>
		<view @tap="goPage('/pages/article/detail?type=about')" class="item">
		  <view class="icon">
		    <image src="/static/my/ic_about.png"></image>
		  </view>
		  <view class="label">联系客服</view>
		</view>
      </view>
    </view>
    <service
        ref="kefu"
        :qrcode="kefuQrcode"
    ></service>
    <u-popup
        bgColor="#f7f7f7"
        @close="closeUseCard"
        :closeable="true"
        mode="center"
        round="20rpx"
        :safeAreaInsetBottom="false"
        :show="useCardShow"
    >
      <view class="card-use">
        <view class="title">使用兑换码</view>
        <view style="padding: 30rpx 0;">
          <u-input
              class="mt-40"
              placeholder="请输入兑换码"
              v-model="cardCode"
          ></u-input>
        </view>
        <view class="footer w100 flex-around mt-40">
          <button @tap="closeUseCard" class="btn cancel" :plain="true">取消</button>
          <button @tap="useCardConfirm" class="btn" :plain="true">确定</button>
        </view>
      </view>
    </u-popup>
    <customTabbar selected="my"  theme="black" color="#fefbf7" background-color="#201d2b" border-color="#111"></customTabbar>
  </scroll-view>
</template>

<script>
import customTabbar from '@/components/customTabbar'
import service from '@/components/service'
export default {
  components: { customTabbar, service },
  data() {
    return {
      version: '',
      articleList: [],
      userInfo: {
        user_id: 0,
        avatar: '',
        nickname: '',
        phone: '',
        balance: 0,
        balance_body: 0,
        balance_voice: 0,
        point_title: ''
      },
      system: 'ios',
      iosPayOpen: false,
      kefuQrcode: '',
      cardPayOpen: true,
      appLogo: '',
      useCardShow: false,
      cardCode: '',
      navBarHeight: 0,
      statusBarHeight: 0
    };
  },
  onShow() {
    this.getUserInfo();
    this.getSetting();
  },
  onPullDownRefresh() {
    this.getUserInfo();
    this.getSetting();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad() {
    // #ifndef WEB
    const app = getApp();
    this.statusBarHeight = app.globalData.statusBarHeight + 'px'
    this.navBarHeight = app.globalData.navBarHeight + 'px'
    this.system = app.globalData.system;
    // #endif
    // #ifndef MP-WEIXIN
    this.system = '';
    // #endif

  },
  methods: {
    goSetting() {
      if (!this.userInfo.user_id) {
        this.goLogin()
        return
      }
      uni.navigateTo({
        url: '/pages/my/setting'
      });
    },
    goShare() {
      uni.navigateTo({
        url: '/pages/commission/index'
      })
    },
    getSetting() {
      this.$util.request({
        url: '/wxapp/getSetting'
      }).then(res => {
        this.kefuQrcode = res.data.kefu_qrcode
        this.iosPayOpen = res.data.ios_pay_open
      })
    },
    copyMid(mid) {
      if (!mid) {
        return
      }
      var that = this
      uni.setClipboardData({
        data: mid + '',
        showToast: false,
        success() {
          that.$util.message('已复制 MID')
        }
      })
    },
    handleContact(e) {
      console.log(e);
    },
    showKefu() {
      this.$refs.kefu.show = true
    },
    openUseCard() {
      if (!this.userInfo.user_id) {
        this.goLogin()
        return
      }
      this.useCardShow = true;
    },
    closeUseCard() {
      this.useCardShow = false;
      this.cardCode = ''
    },
    useCardConfirm() {
      if (!this.cardCode) {
        this.$util.message('请输入兑换码')
        return
      }
      this.$util.request({
        url: '/user/useCard',
        data: {
          code: this.cardCode
        }
      }).then(res => {
        this.closeUseCard();
        this.getUserInfo();
        this.$util.message(res.message, 'success')
      })
    },
    goLogin() {
      if (this.userInfo.user_id) {
        this.getUserInfo();
      } else {
        this.$util.toLogin()
      }
    },
    getUserInfo() {
      this.$util.request({
        url: '/user/getInfo',
        loading: false
      }).then(res => {
        if (res.data) {
          this.userInfo = res.data;
        }
      })
    },
    goPage(page) {
      if (!this.userInfo.user_id) {
        this.goLogin()
        return
      }
      uni.navigateTo({
        url: page
      });
    }
  }
}
</script>
<style scoped>
@import './my.css';
</style>
